<template>
    <view class="pub_inputs">
        <div class="abox">
            <div class="ali ali_align_right">
                <div class="atitle">所在地区</div>
                <picker class="apicker" @change="areaPickerChange" @columnchange="areaColumnPickerChange"
                    :value="areaIndex" :range="areaList" range-key="name" mode="multiSelector" :disabled="!isEdit">
                    <input type="text" v-model="areaName" placeholder="请选择所在地区" disabled>
                    <div class="icon-font-basic icon-b-arrow-1-2"></div>
                </picker>
            </div>
            <div class="ali">
                <div class="atitle">详细地址</div>
                <textarea class="atextarea" placeholder="请输入" :maxlength="-1" v-model="address"
                    :disabled="!isEdit"></textarea>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    props: {
        isEdit: {
            type: Boolean,
            default: true
        },
        baseAddress: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            areaData: [],//初始地址数据
            areaList: [],//选择器所需的地址数据
            areaIndex: [0, 0, 0],//选择器选择的key
            areaName: '',//选择器选择的name
            areaId: [0, 0, 0],//选择器选择的id

            address: '',
            addInfo: ''
        };
    },
    watch: {
        baseAddress: {
            immediate: true,
            deep: true,
            handler(newVal) {
                console.log("chd===newVal", newVal);
                this.addInfo = newVal;
                this.address = newVal.address;
                this.areaId = [newVal.provinceId, newVal.cityId, newVal.regionId];
                this.areaName = [newVal.province, newVal.city, newVal.region].join("");
                this.getArea();
            }
        }
    },
    mounted() {
        // this.getArea();
    },
    methods: {
        async getArea() {
            const res = await this.$request.get('public/getArea', {});
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.areaData = res.result;
                if (this.addInfo != '') {
                    let index_0 = this.areaData.findIndex(li => {
                        return li.id == this.addInfo.provinceId;
                    })
                    let index_1 = 0;
                    let index_2 = 0;
                    if (index_0 != -1) {
                        index_1 = this.areaData[index_0].children.findIndex(li => {
                            return li.id == this.addInfo.cityId;
                        })
                        if (index_1 != -1) {
                            index_2 = this.areaData[index_0].children[index_1].children.findIndex(li => {
                                return li.id == this.addInfo.regionId;
                            })
                            index_2 = index_2 == -1 ? 0 : index_2;
                        } else {
                            index_1 = 0;
                        }
                    } else {
                        index_0 = 0;
                    }
                    this.areaIndex = [index_0, index_1, index_2];
                }
                this.dealArea();
            }
        },
        dealArea() {
            let chooseIndex = this.areaIndex;
            const chinaData = this.areaData;
            let provinceArr = chinaData.map(item => {
                return { name: item.name, id: item.id }
            })
            let cityArr = [];
            if (chinaData[chooseIndex[0]].children) {
                let children_0 = chinaData[chooseIndex[0]].children;
                cityArr = children_0.map(item => {
                    return { name: item.name, id: item.id }
                })
            }
            let regionArr = [];
            if (chinaData[chooseIndex[0]].children[chooseIndex[1]].children) {
                let children_1 = chinaData[chooseIndex[0]].children[chooseIndex[1]].children;
                regionArr = children_1.map(item => {
                    return { name: item.name, id: item.id }
                })
            }
            // console.log(provinceArr, cityArr, regionArr);
            this.areaList = [provinceArr, cityArr, regionArr];
            // console.log(this.areaList);
        },
        areaPickerChange(data) {
            console.log(data, this.areaIndex);
            let textArr = [];
            this.areaIndex = data.detail.value;
            this.areaIndex.forEach((li, key) => {
                textArr.push(this.areaList[key][li].name);
                this.areaId[key] = this.areaList[key][li].id;
            });
            // console.log(textArr);
            this.areaName = textArr.join("");
        },
        areaColumnPickerChange(data) {
            if (!this.isEdit) return;
            // console.log(data);
            if (data.detail.column < 2) {
                if (data.detail.column == 0) {
                    this.areaIndex[1] = 0;
                    this.areaIndex[2] = 0;
                }
                if (data.detail.column == 1) {
                    this.areaIndex[2] = 0;
                }
                this.areaIndex[data.detail.column] = data.detail.value;
                this.dealArea();
            }
        },
        getAddressInfo() {
            return {
                address: this.address,
                cityId: this.areaId[1],
                provinceId: this.areaId[0],
                regionId: this.areaId[2],
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/mine.scss";
</style>
